<template>
  <div>
    <h1>DatePicker 日期选择器</h1>
    <p>用于选择或输入日期</p>
    <el-date-picker
      v-model="createDate">
    </el-date-picker>
    <p>只读，只是不允许修改，但是数据可以提交</p>
    <el-date-picker
      v-model="createDate"
      readonly>
    </el-date-picker>
    <p>不可用，不会提交该表单的数据</p>
    <el-date-picker
      v-model="createDate"
      disabled>
    </el-date-picker>
    <p>不希望用户自行修改值</p>
    <el-date-picker
      v-model="createDate"
      :editable="false">
    </el-date-picker>
    <p>不显示清除按钮</p>
    <el-date-picker
      v-model="createDate"
      :clearable="false">
    </el-date-picker>
    <p>显示提示</p>
    <el-date-picker
      v-model="createDate"
      placeholder="请选择创建时间">
    </el-date-picker>
    <p>显示类型</p>
    <el-date-picker
      v-model="createDate"
      placeholder="请选择创建时间"
      type="time">
    </el-date-picker>
    <br>
    <el-date-picker
      v-model="createDate"
      placeholder="请选择创建时间"
      type="datetime">
    </el-date-picker>
    <br>
    <el-date-picker
      v-model="createDate"
      placeholder="请选择创建时间"
      type="daterange"
      start-placeholder="开始时间"
      end-placeholder="过期时间"
      range-separator="至">
    </el-date-picker>
    <p>修改在输入框中的格式为yyyy/MM/dd</p>
    <el-date-picker
      v-model="createDate"
      placeholder="请选择创建时间"
      type="daterange"
      start-placeholder="开始时间"
      end-placeholder="过期时间"
      range-separator="至"
      format="yyyy/MM/dd">
    </el-date-picker>
    <p>日期配置</p>
    <el-date-picker
      v-model="createDate"
      type="date"
      placeholder="请输入时间"
      :picker-options="pickerOptions">
    </el-date-picker>
    <p>事件的使用</p>
    <el-date-picker
      v-model="createDate"
      type="date"
      placeholder="请输入时间"
      :picker-options="pickerOptions"
      @change="changeEvent">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "DatePickerC",
  data() {
    return {
      createDate: "",
      pickerOptions: {
        //对日期进行控制
        //选择的日期只能是今天之前的日期
        //也就是，大于今天的日期设置为不可选
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    }
  },
  methods: {
    changeEvent(value){
      console.log(value);
    }
  }
}
</script>

<style scoped>

</style>
